<template>
    <Page>
        <div class="ContentView">
            <RouterView v-slot="{ Component }">
                <transition :name="RouterChange">
                    <component :is="Component" />
                </transition>
            </RouterView>
        </div>
        <van-tabbar v-model="active" @change="onChange" route>
            <van-tabbar-item icon="home-o" to="home">首页</van-tabbar-item>
            <van-tabbar-item icon="search" to="tasklist">任务列表</van-tabbar-item>
            <van-tabbar-item icon="friends-o" to="raiders">攻略</van-tabbar-item>
            <van-tabbar-item icon="setting-o" to="my">我的</van-tabbar-item>
        </van-tabbar>
    </Page>
</template>
<script setup>
import { ref } from "vue";
const RouterChange = ref('');
const active = ref(0);
const activeCache = ref(0);
const onChange = (index) => {
    if (activeCache.value > index) {
        RouterChange.value = 'slide-right';
    } else {
        RouterChange.value = 'slide-left';
    };
    activeCache.value = index;
};


</script>
<style lang="less" scoped>
.ContentView {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 50px;
}
</style>